<template>
  <div style="padding: 16px">
    <a-breadcrumb>
      <a-breadcrumb-item>首页</a-breadcrumb-item>
      <a-breadcrumb-item>学校管理</a-breadcrumb-item>
      <a-breadcrumb-item>首页看板</a-breadcrumb-item>
    </a-breadcrumb>
  </div>
  <a-layout class="layout-main">
    <a-layout-sider breakpoint="lg" :width="190">
      <a-menu :selected-keys="selectedKeys" @menu-item-click="onClickMenuItem">
        <a-menu-item key="workstand">
          <icon-computer />
          首页看板
        </a-menu-item>
        <a-sub-menu key="schoolInfo">
          <template #icon><icon-book /></template>
          <template #title>学籍信息管理</template>
          <a-menu-item key="schoolClasses">班级管理</a-menu-item>
          <a-menu-item key="schoolStudent">学生管理</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout class="bg-base">
        <a-layout-content>
          <RouterView></RouterView>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const selectedKeys = ref([]);
const params = history.state.params;
const onClickMenuItem = (key) => {
  selectedKeys.value = [key];
  router.push({
    name: key,
    state: {
      params,
    },
  });
};

onClickMenuItem("workstand");
</script>
<style @scoped></style>